import PropTypes from 'prop-types'
import React, { memo, useEffect, useState, useRef } from 'react'
import { CSSTransition, SwitchTransition } from 'react-transition-group'
import classNames from 'classnames'

import { BrowserWrapper } from './style'
import IconClose from '@/assets/svg/icon-close'
import IconArrowLeft from '@/assets/svg/icon-arrow-left'
import IconArrowRight from '@/assets/svg/icon-arrow-right'
import IconTriangleArrowBottom from '@/assets/svg/icon-triangle-arrow-bottom'
import Indicator from '../indicator'
import IconTriangleArrowTop from '@/assets/svg/icon-triangle-arrow-top'

const PictureBrowser = memo((props) => {
    const { pictureUrls, closeClick } = props
    const [currentIndex, setCurrentIndex] = useState(0)  // 记录图片索引
    const picturesRef = useRef(null);
    const [isNext, setIsNext] = useState(true)  // 记录是否是下一张
    const [showList, setShowList] = useState(true) // 记录是否展示图片列表

    // 当图片浏览器展示出来时，取消滚动条
    useEffect(() => {
        document.body.style.overflow = 'hidden'
        return () => {
            document.body.style.overflow = 'auto'
        }
    }, [])

    // 点击关闭
    function closeBtnClickHandle() {
        if (closeClick) {
            closeClick()
        }
    }

    // 控制器
    function controlClickHandle(isNext = true) {
        let newIndex = isNext ? currentIndex + 1 : currentIndex - 1
        if (newIndex < 0) newIndex = pictureUrls.length - 1
        if (newIndex > pictureUrls.length - 1) newIndex = 0

        setCurrentIndex(newIndex)
        setIsNext(isNext)
    }

    // 点击底部图片
    function bottomItemClickHandle(index) {
        setIsNext(index > currentIndex) // 判断是否是下一张
        setCurrentIndex(index)
    }

    return (
        <BrowserWrapper isnext={isNext} showlist={showList}>
            {/* 头部-关闭按钮 */}
            <div className="top">
                <div className="close-btn" onClick={closeBtnClickHandle}>
                    <IconClose />
                </div>
            </div>
            {/* 图片浏览器-图片切换 */}
            <div className="slider">
                {/* 控制器 */}
                <div className="control">
                    <div className="btn left" onClick={e => controlClickHandle(false)}>
                        <IconArrowLeft width="77" height="77" />
                    </div>
                    <div className="btn right" onClick={e => controlClickHandle(true)}>
                        <IconArrowRight width="77" height="77" />
                    </div>
                </div>
                {/* 图片 */}
                <div className="picture">
                    {/* 过渡动画组件 */}
                    <SwitchTransition mode="out-in">
                        <CSSTransition
                            key={pictureUrls?.[currentIndex]}
                            classNames="pic"
                            timeout={200}
                            nodeRef={picturesRef}
                        >
                            <img ref={picturesRef} src={pictureUrls[currentIndex]} alt="" />
                        </CSSTransition>
                    </SwitchTransition>
                </div>
            </div>
            {/* 底部-信息图片 */}
            <div className="preview">
                <div className="info">
                    {/* 描述 */}
                    <div className="desc">
                        <div className="count">
                            <span>{currentIndex + 1}/{pictureUrls.length}:</span>
                            <span>room apartment图片{currentIndex + 1}</span>
                        </div>
                        <div className="toggle" onClick={e => setShowList(!showList)}>
                            <span>{showList ? "隐藏" : "显示"}照片列表</span>
                            {showList ? <IconTriangleArrowBottom /> : <IconTriangleArrowTop />}
                        </div>
                    </div>
                    <div className="list">
                        {/* 指示器-图片列表 */}
                        <Indicator selectIndex={currentIndex}>
                            {
                                pictureUrls?.map((item, index) => {
                                    return (
                                        <div
                                            className={classNames("item", { active: currentIndex === index })}
                                            key={index}
                                            onClick={e => bottomItemClickHandle(index)}
                                        >
                                            <img src={item} alt="" />
                                        </div>
                                    )
                                })
                            }
                        </Indicator>
                    </div>
                </div>
            </div>
        </BrowserWrapper>
    )
})

PictureBrowser.propTypes = {
    pictureUrls: PropTypes.array
}

export default PictureBrowser